<template>
  <div class="main">
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
    <!-- <HullSeat @getData="getData" :zw="9" :max="1000"></HullSeat> -->
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
  },
  mounted() {
    this.$i18n.locale = sessionStorage.getItem('lang'); // 切换语言
    this.handleResize()
    window.addEventListener('resize', this.handleResize);
  },
  methods: {
    handleResize() {
      this.$store.commit('setScreenWidth')
      this.screenWidth = window.innerWidth;
      const designWidth = 1920;
      const screenWidth = window.innerWidth;
      const ratio = screenWidth / designWidth;
      if (screenWidth <= 1000) {
        document.documentElement.style.fontSize = 16 * ratio * 16 + 'px';
      } else {
        document.body.style.fontSize = 16 + 'px';
      }
    },
  }
}
</script>

<style lang="scss">
/* @import "@/assets/css/swiper.min.css"; */

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;

}
</style>
